<!DOCTYPE HTML>
<html>
<head>
<!--    <meta charset="utf-8">-->
    <meta http-equiv="Access-Control-Allow-Origin" content="*" charset="utf-8"/>
<!--    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no">-->
    <title>抛体运动方程变量关系探究</title>
    <link rel="stylesheet" href="css/index.css" />
    <link rel="stylesheet" href="layui/css/layui.css"  media="all">
    <link rel="stylesheet" href="font-awesome-4.7.0/css/font-awesome.min.css" />

    <script type="text/javascript" src="js/jquery1.8.3.min.js"></script>
    <script type="text/javascript" src="js/parabola.js"></script>
    <script type="text/javascript" src="js/panel.js"></script>
    <script type="text/javascript" src="layui/layui.js" charset="utf-8"></script>

</head>
<style>
    #ground{
        position: absolute;
        width: 100%;
        height: 20%;
        top:85%;
        background-color: darkgreen;
    }
    /* 2m - 16m*/
    #panel{
        position: absolute;bottom: 15%;left: 100px;
        width: 100px;
        height: 200px;
        background: cornflowerblue;
    }
    #box{
        position: absolute;bottom:50%;left:100px;
        width: 200px;
        height: 50px;
        border: solid 2px black;
        background-color: transparent;
        text-align: center;
    }
    .fa{
        margin-left: 20px;
    }
    .target2 {
        animation: myfirst 1s infinite;
    }
    #content{
        position: relative;
        top:5%;
    }
    @keyframes myfirst {
        0% {
            transform: translate(0px, 0px);
        }
        50% {
            transform: translate(0px, -10px);
        }
        100% {
            transform: translate(0px, 0px);
        }
    }

</style>
<body>

<div style="font-family:'微软雅黑';float:left;position:absolute;margin:15px 15px "3>
    <a id="reset" href="#">
        <i class="fa fa-eraser  fa-lg"></i> 刻度尺</a>
    <a id="setOptions"  href="#">
        <i class="fa fa-rocket fa-lg"></i> 发射</a>
    <a id="stop"  href="#">
        <i class="fa fa-pause fa-lg"></i> 暂停</a>
<!--    <a id="chart" target="_blank">-->
<!--        <i class="fa fa-area-chart fa-lg"></i> 轨迹线关系研究</a>-->
    <a id="star"  target="_blank" style="display: none">
        <i class="fa fa-star fa-lg"></i> 竞赛模式</a>
</div>

    <!-- 右上角的滑块 -->
    <div id="slider-container">
                <form class="layui-form">
                    <div class="layui-form-item">
                        <fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
                            <legend style="color: #0C0C0C;font-size:15px;padding: 3px 20px" class="layui-bg-green">高度 /m</legend>
                        </fieldset>
                        <div class="demo-slider" id="slideTest8_1"></div>

                        <fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
                            <legend style="color: #0C0C0C;font-size:15px;padding: 3px 10px" class="layui-bg-green">发射角度 °</legend>
                        </fieldset>
                        <div class="demo-slider" id="slideTest8_2"></div>

                        <fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
                            <legend style="color: #0C0C0C;font-size:15px;padding: 3px 13px" class="layui-bg-green">初速度 m/s</legend>
                        </fieldset>
                        <div class="demo-slider" id="slideTest8_3"></div>

                        <fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
                            <legend style="color: #0C0C0C;font-size:15px;padding: 3px 13px" class="layui-bg-green">抛体质量 kg</legend>
                        </fieldset>
                        <div class="demo-slider" id="slideTest8_4"></div>

                    </div>
                </form>
      </div>


    <div id="ground" >
        <!--<div id="box"></div>-->
    </div>
    <div id="panel"></div>
    <div id="content">
        <h3>实验说明：</h3>
        <p>1、请您在《普通模式》进行抛体运动探究。 探究内容主要围绕"各物理量如何影响水平射程"</p>
        <p>2、您可以进入《轨迹线关系研究》辅助探究。</p>
        <p>3、请您在《竞赛模式》进行挑战。</p>
        <p>4、请您务必在完成所有实验后，进入《轨迹线关系研究》写下您完成此次实验后得出的实验结论。</p>
    </div>



    <!-- 发射位置 -->
    <div id="boll" class="boll" style=" width: 30px;
            height: 30px;
            /*background-color: #ff3333;*/
            position: absolute;
            bottom: 15%;
            /*top: 584px;*/
            left: 169px;
            -moz-border-radius: 50px;
            -webkit-border-radius: 50px;
            border-radius: 50px;">
        <img src="imgs/ball.png" style="width: 35px;height: 35px">
    </div>
    <!-- 目标物体  -->
    <img id="target2" class="target2" src="imgs/mubiao.png" style="
            width: 50px;
            height: 50px;
            /*background-color: #0000ff;*/
            position: absolute;
            bottom: 15%;
            left: 1100px;
             -moz-border-radius: 50px;
             -webkit-border-radius: 50px;
            border-radius: 50px;"/>

    <!--  实际的落地点 -->
    <div id="target" class="target" style="
            width: 50px;
            height: 50px;
          /*background-color: #00ff00;*/
            position: absolute;
        /*   top: 600px;                  !*下面的boll范围，top-80   left-100 获得 *!*/
            top:81%;
            left: 1200px;
             -moz-border-radius: 50px;
             -webkit-border-radius: 50px;
            border-radius: 50px;"></div>

<div>
    <p id="juli" style="font-size:15px;color:white;float:left;position:absolute;left: 195px;top:88%;" value=""></p>
</div >
<!--<button style="position:relative;top: 68%;left: 85% ">显示刻度</button>-->
<div id="ruler" style="display: none">
    <p style="font-size:15px;color:black;float:left;position:absolute;left: 190px;top:83%;" value="">0</p>
    <p style="font-size:15px;color:black;float:left;position:absolute;left: 290px;top:83%;" value="">10</p>
    <p style="font-size:15px;color:black;float:left;position:absolute;left: 390px;top:83%;" value="">20</p>
    <p style="font-size:15px;color:black;float:left;position:absolute;left: 490px;top:83%;" value="">30</p>
    <p style="font-size:15px;color:black;float:left;position:absolute;left: 590px;top:83%;" value="">40</p>
    <p style="font-size:15px;color:black;float:left;position:absolute;left: 690px;top:83%;" value="">50</p>
    <p style="font-size:15px;color:black;float:left;position:absolute;left: 790px;top:83%;" value="">60</p>
    <p style="font-size:15px;color:black;float:left;position:absolute;left: 890px;top:83%;" value="">70</p>
    <p style="font-size:15px;color:black;float:left;position:absolute;left: 990px;top:83%;" value="">80</p>
    <p style="font-size:15px;color:black;float:left;position:absolute;left: 1090px;top:83%;" value="">90</p>

</div>

<div>
    <p id="xinxi" style="background-color:azure;border-radius:5px;padding: 10px 10px;
    font-size:14px;color:dimgray;float:left;position:absolute;left: 133px;top:67%;opacity: 0%" value=""></p>
</div>
<!--<input type="text" style="position: absolute;left: 40%" class="userId">-->
<!--<input type="text" style="position: absolute;left: 55%"class="userName">-->
<script type="text/javascript">
//接收用户信息
    var jsonData = JSON.parse(window.name); //将window.name转化为json对象
    var user_id=jsonData.userid;
    var user_name=jsonData.username;

    $(function(){
        $('#chart').click(function(){
           window.location="zuobiaoxi1.html"
        })
    })
    var cishu=0;
    var shecheng=0;
  var width=document.body.clientWidth,height=document.body.clientHeight;
  document.getElementById("boll").style.top=(height*0.85-30-200)+"px";

  // console.log("浏览器的高度： "+height);
    $(window).resize(function() {
        width = $(this).width();
        height = $(this).height();
        bool.elOriginalTop=(height*0.85-30-h*10)+"px";
        document.getElementById("boll").style.top=(height*0.85-30-h*10)+"px";
    });
        var v0=20,firstAngle=0,h=20;mm=1;
        var tryArray=new Array();   // 存取每次运动的数据
        var fashe=false;

        // 滑块拉完后的变化
        $(function(){
                $(document).on('mouseup',(function(){
                    $(document).off('mousemove')
                 //   $('#target').css({'cursor':'default'});
                    if(shuzu1.length==0){
                        h=20;
                    }
                    else{
                        h=shuzu1[shuzu1.length-1];

                    }
                    if(shuzu2.length==0){
                       v0=20;
                    }
                    else{
                        v0=shuzu2[shuzu2.length-1];
                    }
                    if(shuzu3.length==0){
                        firstAngle=5;
                    }
                    else{
                        firstAngle=shuzu3[shuzu3.length-1];
                    }
                    if(shuzu4.length==0){
                        mm=1;
                    }
                    else{
                        mm=shuzu4[shuzu4.length-1];
                    }
                    document.getElementById('panel').style.height = h*10 +'px';
                    if(document.getElementById("boll").style.left=="195px"){
                        document.getElementById("boll").style.top=(height*0.85-30-h*10)+"px";
                    }

                }));
        });

        var shuzu1=new Array();
        var shuzu2=new Array();
        var shuzu3=new Array();
        var shuzu4=new Array();

        layui.use('slider', function(){
            var $ = layui.$
                ,slider = layui.slider;

            //高度
            slider.render({
                elem: '#slideTest8_1'
                ,input: true
                ,min:0
                ,max:50
                ,value:20
                ,change: function(value){
                    shuzu1.push(value);
                    // console.log(shuzu1);
                }
            });
            //初速度
            slider.render({
                elem: '#slideTest8_2'
                ,input: true //输入框
                ,min:0
                ,max:50
                ,value:20
                ,change: function(value){
                    shuzu2.push(value);
                }
            });
            //发射角度
            slider.render({
                elem: '#slideTest8_3'
                ,input: true //输入框
                ,min:0
                ,max:90
                ,value:5
                ,change: function(value){
                    shuzu3.push(value);
                }
            });
            // 质量选择
            slider.render({
                elem: '#slideTest8_4'
                ,input: true //输入框
                ,min:1
                ,max:4
                ,value:1
                ,change: function(value){
                    shuzu4.push(value);
                    // console.log(value+"质量")
                    if(value==2){
                        slider.render({
                            elem: '#slideTest8_2'
                            ,input: true //输入框
                            ,min:0
                            ,max:40
                            ,value:20
                            ,change: function(value){
                                shuzu2.push(value);
                            }
                        });
                    };
                    if(value==3){
                        slider.render({
                            elem: '#slideTest8_2'
                            ,input: true //输入框
                            ,min:0
                            ,max:30
                            ,value:15
                            ,change: function(value){
                                shuzu2.push(value);
                            }
                        });
                    };
                    if(value==4){
                        slider.render({
                            elem: '#slideTest8_2'
                            ,input: true //输入框
                            ,min:0
                            ,max:20
                            ,value:10
                            ,change: function(value){
                                shuzu2.push(value);
                            }
                        });
                    }
                }
            });
        });

    var g=9.8;

    // 斜抛公式在这
    function tijiao(){
        // console.log("初始高度:"+h+"  初角度:"+firstAngle +"   初速度："+v0);
        // 只要根据角度和v0算出x，后面的轨迹自动生成
        var m=firstAngle*Math.PI/180;
        var mm=v0*Math.sin(m);
        var x;
        x=v0/g*Math.cos(m)*(v0*Math.sin(m)+Math.sqrt(mm*mm+2*g*h))*10;
        // console.log("水平位移："+x/10);
        document.getElementById("target").style.left=(169+x)+"px";
        bool.elOriginalTop=(height*0.85-30-h*10)+"px";
        tryArray.push((x/10).toFixed(2));
        document.getElementById("juli").innerHTML=(x/10).toFixed(2);
        document.getElementById("juli").style.left=(195+x)+"px";
        // shecheng = Number((x/10).toFixed(2))
        shecheng = (x/10).toFixed(2)
    }


    // 轨迹线的number
    var number=-1;

    var bool = new Parabola({
        el: "#boll",
        curvature: 0.001,  // 斜抛出去的角度
        duration: 2000,  // 打点的密度

        stepCallback:function(x,y){

            // document.getElementById('hh').style.display = 'inline'

            // 轨迹线"
            $("<div id='hh' class=\"guiji" + number + "\"  onmouseover='showData(event);'  onmouseleave='notData();'>").appendTo("body").css({
                "position": "absolute",
                "top": this.elOriginalTop + y,
                "left":this.elOriginalLeft + x,
                "background-color":"#CDCDCD",
                "width":"5px",
                "height":"5px",
                "border-radius": "5px",
                "id":"",
                //TODO:
                'display':'inline'
            });
            // var qq=document.getElementById("hh").style.width;
            // console.log(qq);
        }
    });

    function showData(event){

        var nn=event.target.className;
        for( var i=0;i<20;i++){
            if(nn=="guiji"+i)
            {
                document.getElementById("xinxi").innerHTML="高度: "+tryArray[4*i+1] +" m<br>"+"初速度: "+tryArray[4*i+2]+" m/s<br>"+"发射角度: "+tryArray[4*i+3]+" °<br>"+"水平距离: "+tryArray[4*i]+" m";
                $("#xinxi").css({
                    "left":event.screenX,
                    "top":event.screenY-45,
                    "z-index":9999,
                    "opacity":1,
                })
            }
        }


    }
    function notData(){

        document.getElementById("xinxi").innerHTML="";
        document.getElementById("xinxi").style.opacity=0;
    }

   //  $("#reset").click(function (event) {
   //       // document.getElementById("hh").style.background.color="white";
   //       document.getElementById("hh").style.width="15px";
   //      event.preventDefault();
   //      bool.reset();
   //      // console.log(document.getElementById("hh").style.width+"width");
   //      // 每次发射出去后，就清空缓存的数组
   //      shuzu1.splice(0,shuzu1.length);
   //      shuzu2.splice(0,shuzu2.length);
   //      shuzu3.splice(0,shuzu3.length);
   //      shuzu4.splice(0,shuzu4.length);
   //      var $ = layui.$
   //      , slider = layui.slider;
   //      slider.render({
   //              elem: '#slideTest8_2'
   //              ,input: true
   //              ,min:0
   //              ,max:50
   //              ,value:20
   //          });
   //      slider.render({
   //              elem: '#slideTest8_3'
   //              ,input: true
   //              ,min:0
   //              ,max:90
   //              ,value:0
   //          });
   // });
$("#reset").click(function (event) {
    if(document.getElementById("ruler").style.display=="none"){
        document.getElementById("ruler").style.display="inline";
    }else{
        document.getElementById("ruler").style.display="none";
    }

     });

    $("#stop").click(function (event) {
        event.preventDefault();
        bool.stop();
    });

    //发射轨迹
    $("#setOptions").click(function (event) {

        document.getElementById('star').style.display='inline';
        cishu++;
        fashe=true;
        tijiao();
        // console.log(shecheng)
        document.getElementById("boll").style.top=(height*0.85-30-h*10)+"px";
        event.preventDefault();
        bool.setOptions({
            targetEl: $("#target"),
            curvature: 0.001,
            duration: 1000
        });
        bool.start();
        //TODO
        // setTimeout(()=>{
        //     document.getElementById('hh').style.display='none';
        // },1000)
        number++;
        if(fashe){
            if(isNaN(shuzu1[shuzu1.length-1])){
                    shuzu1[shuzu1.length-1]=20;
                }
            if(isNaN(shuzu2[shuzu2.length-1])){
                shuzu2[shuzu2.length-1]=20;
            }
            if(isNaN(shuzu3[shuzu3.length-1])){
                shuzu3[shuzu3.length-1]=0;
            }
            if(isNaN(shuzu4[shuzu4.length-1])){
                shuzu4[shuzu4.length-1]=1;
            }
            tryArray.push(shuzu1[shuzu1.length-1],shuzu2[shuzu2.length-1],shuzu3[shuzu3.length-1],shuzu4[shuzu4.length-1]); // 3i高度，3i+1初速度，3i+2发射角度
            // console.log(tryArray);
            fashe=false;
        }
        $.ajax({
            url:'http://121.4.82.48:8081/ordinary',
            type:'GET',
            data:{
                'height':shuzu1[shuzu1.length-1],
                'speed':shuzu2[shuzu2.length-1],
                'angle':shuzu3[shuzu3.length-1],
                'weight':shuzu4[shuzu4.length-1],
                'distance':shecheng,
                'user_id':user_id,

            },
            success() {
                console.log(shuzu1[shuzu1.length-1],shuzu2[shuzu2.length-1],shuzu3[shuzu3.length-1],shuzu4[shuzu4.length-1],
                    user_id+"成功")
            },
            error(){
                console.log(shecheng+'失败')
            }
        })
        // console.log(shecheng+"ss");
    });

    $(function(){
        $("#star").click(function (event) {
        //点击竞赛模式打包用户信息
            var userid2 = user_id;//获取填写的id
            var username2 = user_name;//获取填写的name
            var jsonData2 = {"userid2":userid2,"username2":username2}; //转化为json格式
            window.name = JSON.stringify(jsonData2); //window.name只接受字符串格式，所以需要把json转换一下

            // $.ajax({
            //     url:'http://localhost:8082/ordinary',
            //     type:'GET',
            //     data:{
            //         'cishu':cishu,
            //     },
            //     success() {
            //         console.log("成功");
            //     },
            //     error(){
            //         console.log('失败')
            //     }
            // })
            window.location="competition.html";
        })
    })



</script>
</body>
</html>